<%--
  Created by IntelliJ IDEA.
  User: Chen
  Date: 2016/4/16
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="assets/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="assets/easyui/jquery.datagrid.js"></script>

    <link rel="stylesheet" type="text/css" href="assets/easyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="assets/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="assets/easyui/demo.css">
    <title>userInfo</title>
</head>
<body>
姓名： ${userInfo.uname}
<%--<%=basePath%>--%>
<%--<%=path%>--%>
<%--${ctx}--%>
<br/>
<a href="${ctx}/user/upload">文件上传</a><br/>
ajax显示全部用户信息：
<div id="show_all_user"></div>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
       url="${ctx}/user/showInfos"
       toolbar="#toolbar"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="uname" width="50">username</th>
        <th field="unumber" width="50">unumber</th>
        <th field="uRegisterTime" width="50">uregister</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>Name:</label>
            <input name="uname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Unumber:</label>
            <input name="unumber">
        </div>
        <div class="fitem">
            <label>uRegisterTime:</label>
            <input name="uRegisterTime" class="easyui-datetimebox">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>


<script type="text/javascript">
    $.ajax({
        type : "get",
        url : "user/showInfos",
        dataType : "json",
        success : function(data) {
            $(data).each(
                    function(i, user) {
                        var p = "<p>username:" + user.uname + "    unumber:"
                                + user.unumber + "    uregister:"
                                + user.uRegisterTime + "</p>";
                        $("#show_all_user").append(p);
                    });
        },
        async : true
    });
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
        url = '${ctx}/user/saveUserInfo';
    }

    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');		// close the dialog
                    $('#dg').datagrid('reload');	// reload the user data
                }
            }
        });
    }


    function editUser() {
        var row = $("#dg").datagrid("getSelected");
        if (row) {
            $("#dlg").dialog("open").dialog('setTitle', 'Edit User');
            $("#fm").form("load", row);
            url = '${ctx}/user/updateUserInfo?id='+row.id;

        }
    }

    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                if (r){
                    $.post('${ctx}/user/deleteUserInfo',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');	// reload the user data
                        } else {
                            $.messager.show({	// show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>
</body>
</html>


